<template>
	<view class="">
		<!--联系客服popup弹窗-->
		<uni-popup ref="openContact" type="bottom">
			<view class="open-contact">
				<view class="header">联系客服</view>
				<view class="content">
					
					<view class="item contact" v-if="data.weixinkf">
						<!-- #ifdef H5 -->
						<view class="title">
							在线客服
						</view>
						<view class="info">
							<button size="mini" class="servicebutton" @click="openWeixinKf()">打开客服会话</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="item contact">
							<view class="title">
								在线客服
							</view>
							<view class="info">
								<button class="servicebutton" open-type="contact" size="mini">打开客服会话</button>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<template v-else>
						<!-- #ifdef MP-WEIXIN -->
						<view class="item contact">
							<view class="title">
								在线客服
							</view>
							<view class="info">
								<button class="servicebutton" open-type="contact" size="mini">打开客服会话</button>
							</view>
						</view>
						<!-- #endif -->
					</template>
					<view class="item qq" v-if="data.qq">
						<view class="title">
							QQ客服
						</view>
						<view class="info">
							<view class="">
								{{data.qq}}
							</view>
						</view>
					</view>
					<view class="item phone" v-if="data.mobile">
						<view class="title">
							服务热线
						</view>
						<view class="info">
							<view class="">
								{{data.mobile}}
							</view>
						</view>
					</view>
					
					<view class="item qrcode">
						<view class="title">
							客服码
						</view>
						<view class="info">
							<image class="image" :src="data.qrcode_url" :show-menu-by-longpress="true"></image>
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					
				}
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			open() {
				this.$refs.openContact.open();
			},
			/**
			 * 打开微信客服
			 */
			openWeixinKf() {
				location.href = this.data.weixinkf
			},
			preview(){
				uni.previewImage({urls:[this.data.qrcode_url]})
			}
		},
	}
</script>

<style lang="scss">
	.open-contact {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 13rpx 13rpx 0 0;

		.header {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 64rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}
	
		.content {
			.item {
				display: flex;
				background-color: #FFFFFF;
				border-bottom: 2rpx solid #FAFAFA;
				line-height: 100rpx;
	
				.title {
					width: 200rpx;
					font-size: 28rpx;
					color: #666;
					margin-left: 40rpx;
				}
	
				.info {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
	
				.servicebutton {
					margin-top: 20rpx;
					.button-item {
						color: #fff;
						border-radius: 30rpx;
					}
				}
			}
	
			.item.qrcode {
				.info {
					min-height: 204rpx;
					.image {
						display: block;
						width: 200rpx;
						height: 200rpx;
						border: 2rpx solid #f8f8f8;
					}
				}
			}
		}
	}
</style>
